<template>
	<view class="content">
		<view class="par" id="parBox" style="
							touch-action: none;
		          position: relative;
		          background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 40rpx 40rpx,linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 40rpx 40rpx;
		          height: 360rpx; width: 640rpx;
		           border: 1px solid blue;
		           margin: 1em;">
			<block v-for="(item,index) in place" :key="index">
				<vue-draggable-resizable :place="place" :w="item.w" :h="item.h" :currIndex="index" :x="item.x*1" :y="item.y*1" :z="item.z" 
					:pWidth="640" :pHeight="360" :grid="item.grid" :parent="true" :isConflictCheck="item.isConflictCheck" :draggable="item.draggable"
					@dragsresizestop="dragsresizestop">
					<view style="width: 100%;height: 100%;position: relative;word-wrap:break-word;overflow: hidden">
						{{index}}left:{{item.x}}
					</view>
				</vue-draggable-resizable>
			</block>
		</view>
		<!-- <my-diy :diyItems="items"></my-diy> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				demo:[1,2,3,4],
				place: [{
						x: 0,
						y: 0,
						w: 200,
						h: 200,
						z:2,
						grid:[1,1],
						isConflictCheck: false,
						draggable:true
						
					},
					{
						x: 0,
						y: 0,
						w: 200,
						h: 200,
						z:1,
						grid:[40,40],
						isConflictCheck: true,
						draggable:true
						
					}
				],
				"items": {
					"0": {
						"name": "搜索框",
						"type": "search",
						"params": {
							"placeholder": "请输入关键字进行搜索"
						},
						"style": {
							"textAlign": "left",
							"searchStyle": "square"
						}
					},
					"1": {
						"name": "图片轮播",
						"type": "banner",
						"style": {
							"btnColor": "#ffffff",
							"btnShape": "round"
						},
						"params": {
							"interval": "2800"
						},
						"data": [{
							"imgUrl": "https://shop.test1.cqjh.tech/uploads/20210709111000f10614240.jpg",
							"linkUrl": ""
						}, {
							"imgUrl": "https://shop.test1.cqjh.tech/uploads/20210709111000f10614240.jpg",
							"linkUrl": ""
						}]
					},
					"2": {
						"name": "单图组",
						"type": "imageSingle",
						"style": {
							"paddingTop": 0,
							"paddingLeft": 0,
							"background": "#ffffff"
						},
						"data": [{
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/uploads\/20210714133318a93142436.jpg",
							"imgName": "image-1.jpg",
							"linkUrl": ""
						}]
					},
					"3": {
						"name": "视频组",
						"type": "video",
						"params": {
							"videoUrl": "http:\/\/wxsnsdy.tc.qq.com\/105\/20210\/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400",
							"poster": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/video_poster.png",
							"autoplay": "0"
						},
						"style": {
							"paddingTop": "0",
							"height": "190"
						}
					},
					"4": {
						"name": "公告组",
						"type": "notice",
						"params": {
							"text": "这里是第一条自定义公告的标题这里是第一条自定义公告的标题这里是第一条自定义公告的标题这里是第一条自定义公告的标题这里是第一条自定义公告的标题这里是第一条自定义公告的标题这里是第一条自定义公告的标题这里是第一条自定义公告的标题",
							"icon": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/notice.png"
						},
						"style": {
							"paddingTop": "18",
							"background": "#ca2121",
							"textColor": "#000000"
						}
					},
					"5": {
						"name": "辅助空白",
						"type": "blank",
						"style": {
							"height": "66",
							"background": "#675b5b"
						}
					},
					"6": {
						"name": "辅助线",
						"type": "guide",
						"style": {
							"background": "#ffffff",
							"lineStyle": "dashed",
							"lineHeight": "6",
							"lineColor": "#dcf613",
							"paddingTop": 10
						}
					},
					"7": {
						"name": "导航组",
						"type": "navBar",
						"style": {
							"background": "#ffffff",
							"rowsNum": "4"
						},
						"data": [{
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/navbar\/01.png",
							"imgName": "icon-1.png",
							"linkUrl": "",
							"text": "按钮文字1",
							"color": "#666666"
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/navbar\/01.png",
							"imgName": "icon-2.jpg",
							"linkUrl": "",
							"text": "按钮文字2",
							"color": "#666666"
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/navbar\/01.png",
							"imgName": "icon-3.jpg",
							"linkUrl": "",
							"text": "按钮文字3",
							"color": "#666666"
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/navbar\/01.png",
							"imgName": "icon-4.jpg",
							"linkUrl": "",
							"text": "按钮文字4",
							"color": "#666666"
						}]
					},
					"8": {
						"name": "图片橱窗",
						"type": "window",
						"style": {
							"paddingTop": "0",
							"paddingLeft": "0",
							"background": "#ffffff",
							"layout": "2"
						},
						"data": [{
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/01.jpg",
							"linkUrl": ""
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/02.jpg",
							"linkUrl": ""
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/03.jpg",
							"linkUrl": ""
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/04.jpg",
							"linkUrl": ""
						}],
						"dataNum": 4
					},
					"9": {
						"name": "图片橱窗",
						"type": "window",
						"style": {
							"paddingTop": "0",
							"paddingLeft": "0",
							"background": "#ffffff",
							"layout": "3"
						},
						"data": [{
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/01.jpg",
							"linkUrl": ""
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/02.jpg",
							"linkUrl": ""
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/03.jpg",
							"linkUrl": ""
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/04.jpg",
							"linkUrl": ""
						}],
						"dataNum": 4
					},
					"10": {
						"name": "图片橱窗",
						"type": "window",
						"style": {
							"paddingTop": "0",
							"paddingLeft": "0",
							"background": "#ffffff",
							"layout": "4"
						},
						"data": [{
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/01.jpg",
							"linkUrl": ""
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/02.jpg",
							"linkUrl": ""
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/03.jpg",
							"linkUrl": ""
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/04.jpg",
							"linkUrl": ""
						}],
						"dataNum": 4
					},
					"11": {
						"name": "图片橱窗",
						"type": "window",
						"style": {
							"paddingTop": "0",
							"paddingLeft": "0",
							"background": "#ffffff",
							"layout": "-1"
						},
						"data": [{
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/01.jpg",
							"linkUrl": ""
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/02.jpg",
							"linkUrl": ""
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/03.jpg",
							"linkUrl": ""
						}, {
							"imgUrl": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/window\/04.jpg",
							"linkUrl": ""
						}],
						"dataNum": 4
					},
					"12": {
						"name": "商品组",
						"type": "goods",
						"params": {
							"source": "auto",
							"auto": {
								"category": 0,
								"goodsSort": "all",
								"showNum": 6
							}
						},
						"style": {
							"background": "#F6F6F6",
							"display": "list",
							"column": "1",
							"show": {
								"goodsName": "1",
								"goodsPrice": "1",
								"linePrice": "1",
								"sellingPoint": true,
								"goodsSales": true
							}
						},
						"defaultData": [{
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}, {
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}, {
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}, {
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}],
						"data": [{
							"goods_id": 18495,
							"goods_name": "20210609-修改",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "http:\/\/47.108.52.24:8900\/local\/files\/3ed94aa6f74df75737e004ec7576bc2e_20210609175820.png",
							"goods_image": "http:\/\/47.108.52.24:8900\/local\/files\/3ed94aa6f74df75737e004ec7576bc2e_20210609175820.png",
							"goods_price": "1.71",
							"single_price": "1.71",
							"line_price": "120.00",
							"goods_sales": 488
						}, {
							"goods_id": 18363,
							"goods_name": "婴棉艺婴儿六层纱布浴巾宝宝多功能纱布童被 105*105cm",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200908\/eeb4496e85e84f5eb2368e1089dce5c0_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200908\/eeb4496e85e84f5eb2368e1089dce5c0_big.jpg",
							"goods_price": "23.36",
							"single_price": "23.36",
							"line_price": "0.00",
							"goods_sales": 264
						}, {
							"goods_id": 18362,
							"goods_name": "中国笨尾熊新生儿纯棉三角巾男女混批尺寸29*42",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/106ae56d6ea6471ab1b74cdab3557fa2_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/106ae56d6ea6471ab1b74cdab3557fa2_big.jpg",
							"goods_price": "2.44",
							"single_price": "2.44",
							"line_price": "0.00",
							"goods_sales": 447
						}, {
							"goods_id": 18361,
							"goods_name": "中国婴棉艺高密纱布婴幼儿网红款绣花方巾散装30*30cm",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20191017\/d218bb64a80c4f488a82ff31a28013df_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20191017\/d218bb64a80c4f488a82ff31a28013df_big.jpg",
							"goods_price": "2.81",
							"single_price": "2.81",
							"line_price": "0.00",
							"goods_sales": 190
						}, {
							"goods_id": 18360,
							"goods_name": "中国笨尾熊27*50加厚六层纯棉纱布儿童毛巾颜色混发",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200317\/76498984013e459c90619522b7c1db08_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200317\/76498984013e459c90619522b7c1db08_big.jpg",
							"goods_price": "3.44",
							"single_price": "3.44",
							"line_price": "0.00",
							"goods_sales": 461
						}, {
							"goods_id": 18359,
							"goods_name": "中国笨尾熊纯棉纱布儿童隔汗巾颜色混批3码均发",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/2e38fee3cc3a44ceb3e49c7d9cba5a60_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/2e38fee3cc3a44ceb3e49c7d9cba5a60_big.jpg",
							"goods_price": "3.69",
							"single_price": "3.69",
							"line_price": "0.00",
							"goods_sales": 276
						}]
					},
					"13": {
						"name": "商品组",
						"type": "goods",
						"params": {
							"source": "auto",
							"auto": {
								"category": 0,
								"goodsSort": "all",
								"showNum": 6
							}
						},
						"style": {
							"background": "#F6F6F6",
							"display": "list",
							"column": "2",
							"show": {
								"goodsName": "1",
								"goodsPrice": "1",
								"linePrice": "1",
								"sellingPoint": "0",
								"goodsSales": "0"
							}
						},
						"defaultData": [{
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}, {
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}, {
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}, {
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}],
						"data": [{
							"goods_id": 18495,
							"goods_name": "20210609-修改",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "http:\/\/47.108.52.24:8900\/local\/files\/3ed94aa6f74df75737e004ec7576bc2e_20210609175820.png",
							"goods_image": "http:\/\/47.108.52.24:8900\/local\/files\/3ed94aa6f74df75737e004ec7576bc2e_20210609175820.png",
							"goods_price": "1.71",
							"single_price": "1.71",
							"line_price": "120.00",
							"goods_sales": 488
						}, {
							"goods_id": 18363,
							"goods_name": "婴棉艺婴儿六层纱布浴巾宝宝多功能纱布童被 105*105cm",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200908\/eeb4496e85e84f5eb2368e1089dce5c0_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200908\/eeb4496e85e84f5eb2368e1089dce5c0_big.jpg",
							"goods_price": "23.36",
							"single_price": "23.36",
							"line_price": "0.00",
							"goods_sales": 264
						}, {
							"goods_id": 18362,
							"goods_name": "中国笨尾熊新生儿纯棉三角巾男女混批尺寸29*42",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/106ae56d6ea6471ab1b74cdab3557fa2_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/106ae56d6ea6471ab1b74cdab3557fa2_big.jpg",
							"goods_price": "2.44",
							"single_price": "2.44",
							"line_price": "0.00",
							"goods_sales": 447
						}, {
							"goods_id": 18361,
							"goods_name": "中国婴棉艺高密纱布婴幼儿网红款绣花方巾散装30*30cm",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20191017\/d218bb64a80c4f488a82ff31a28013df_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20191017\/d218bb64a80c4f488a82ff31a28013df_big.jpg",
							"goods_price": "2.81",
							"single_price": "2.81",
							"line_price": "0.00",
							"goods_sales": 190
						}, {
							"goods_id": 18360,
							"goods_name": "中国笨尾熊27*50加厚六层纯棉纱布儿童毛巾颜色混发",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200317\/76498984013e459c90619522b7c1db08_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200317\/76498984013e459c90619522b7c1db08_big.jpg",
							"goods_price": "3.44",
							"single_price": "3.44",
							"line_price": "0.00",
							"goods_sales": 461
						}, {
							"goods_id": 18359,
							"goods_name": "中国笨尾熊纯棉纱布儿童隔汗巾颜色混批3码均发",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/2e38fee3cc3a44ceb3e49c7d9cba5a60_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/2e38fee3cc3a44ceb3e49c7d9cba5a60_big.jpg",
							"goods_price": "3.69",
							"single_price": "3.69",
							"line_price": "0.00",
							"goods_sales": 276
						}]
					},
					"14": {
						"name": "商品组",
						"type": "goods",
						"params": {
							"source": "auto",
							"auto": {
								"category": 0,
								"goodsSort": "all",
								"showNum": 6
							}
						},
						"style": {
							"background": "#F6F6F6",
							"display": "list",
							"column": "3",
							"show": {
								"goodsName": "1",
								"goodsPrice": "1",
								"linePrice": "1",
								"sellingPoint": "0",
								"goodsSales": "0"
							}
						},
						"defaultData": [{
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}, {
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}, {
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}, {
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}],
						"data": [{
							"goods_id": 18495,
							"goods_name": "20210609-修改",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "http:\/\/47.108.52.24:8900\/local\/files\/3ed94aa6f74df75737e004ec7576bc2e_20210609175820.png",
							"goods_image": "http:\/\/47.108.52.24:8900\/local\/files\/3ed94aa6f74df75737e004ec7576bc2e_20210609175820.png",
							"goods_price": "1.71",
							"single_price": "1.71",
							"line_price": "120.00",
							"goods_sales": 488
						}, {
							"goods_id": 18363,
							"goods_name": "婴棉艺婴儿六层纱布浴巾宝宝多功能纱布童被 105*105cm",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200908\/eeb4496e85e84f5eb2368e1089dce5c0_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200908\/eeb4496e85e84f5eb2368e1089dce5c0_big.jpg",
							"goods_price": "23.36",
							"single_price": "23.36",
							"line_price": "0.00",
							"goods_sales": 264
						}, {
							"goods_id": 18362,
							"goods_name": "中国笨尾熊新生儿纯棉三角巾男女混批尺寸29*42",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/106ae56d6ea6471ab1b74cdab3557fa2_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/106ae56d6ea6471ab1b74cdab3557fa2_big.jpg",
							"goods_price": "2.44",
							"single_price": "2.44",
							"line_price": "0.00",
							"goods_sales": 447
						}, {
							"goods_id": 18361,
							"goods_name": "中国婴棉艺高密纱布婴幼儿网红款绣花方巾散装30*30cm",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20191017\/d218bb64a80c4f488a82ff31a28013df_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20191017\/d218bb64a80c4f488a82ff31a28013df_big.jpg",
							"goods_price": "2.81",
							"single_price": "2.81",
							"line_price": "0.00",
							"goods_sales": 190
						}, {
							"goods_id": 18360,
							"goods_name": "中国笨尾熊27*50加厚六层纯棉纱布儿童毛巾颜色混发",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200317\/76498984013e459c90619522b7c1db08_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200317\/76498984013e459c90619522b7c1db08_big.jpg",
							"goods_price": "3.44",
							"single_price": "3.44",
							"line_price": "0.00",
							"goods_sales": 461
						}, {
							"goods_id": 18359,
							"goods_name": "中国笨尾熊纯棉纱布儿童隔汗巾颜色混批3码均发",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/2e38fee3cc3a44ceb3e49c7d9cba5a60_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/2e38fee3cc3a44ceb3e49c7d9cba5a60_big.jpg",
							"goods_price": "3.69",
							"single_price": "3.69",
							"line_price": "0.00",
							"goods_sales": 276
						}]
					},
					"15": {
						"name": "商品组",
						"type": "goods",
						"params": {
							"source": "auto",
							"auto": {
								"category": 0,
								"goodsSort": "all",
								"showNum": 6
							}
						},
						"style": {
							"background": "#F6F6F6",
							"display": "slide",
							"column": "3",
							"show": {
								"goodsName": "1",
								"goodsPrice": "1",
								"linePrice": "1",
								"sellingPoint": "0",
								"goodsSales": "0"
							}
						},
						"defaultData": [{
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}, {
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}, {
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}, {
							"goods_name": "此处显示商品名称",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/goods\/01.png",
							"goods_price": "99.00",
							"line_price": "139.00",
							"selling_point": "此款商品美观大方 不容错过",
							"goods_sales": "100"
						}],
						"data": [{
							"goods_id": 18495,
							"goods_name": "20210609-修改",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "http:\/\/47.108.52.24:8900\/local\/files\/3ed94aa6f74df75737e004ec7576bc2e_20210609175820.png",
							"goods_image": "http:\/\/47.108.52.24:8900\/local\/files\/3ed94aa6f74df75737e004ec7576bc2e_20210609175820.png",
							"goods_price": "1.71",
							"single_price": "1.71",
							"line_price": "120.00",
							"goods_sales": 488
						}, {
							"goods_id": 18363,
							"goods_name": "婴棉艺婴儿六层纱布浴巾宝宝多功能纱布童被 105*105cm",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200908\/eeb4496e85e84f5eb2368e1089dce5c0_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200908\/eeb4496e85e84f5eb2368e1089dce5c0_big.jpg",
							"goods_price": "23.36",
							"single_price": "23.36",
							"line_price": "0.00",
							"goods_sales": 264
						}, {
							"goods_id": 18362,
							"goods_name": "中国笨尾熊新生儿纯棉三角巾男女混批尺寸29*42",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/106ae56d6ea6471ab1b74cdab3557fa2_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/106ae56d6ea6471ab1b74cdab3557fa2_big.jpg",
							"goods_price": "2.44",
							"single_price": "2.44",
							"line_price": "0.00",
							"goods_sales": 447
						}, {
							"goods_id": 18361,
							"goods_name": "中国婴棉艺高密纱布婴幼儿网红款绣花方巾散装30*30cm",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20191017\/d218bb64a80c4f488a82ff31a28013df_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20191017\/d218bb64a80c4f488a82ff31a28013df_big.jpg",
							"goods_price": "2.81",
							"single_price": "2.81",
							"line_price": "0.00",
							"goods_sales": 190
						}, {
							"goods_id": 18360,
							"goods_name": "中国笨尾熊27*50加厚六层纯棉纱布儿童毛巾颜色混发",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200317\/76498984013e459c90619522b7c1db08_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200317\/76498984013e459c90619522b7c1db08_big.jpg",
							"goods_price": "3.44",
							"single_price": "3.44",
							"line_price": "0.00",
							"goods_sales": 461
						}, {
							"goods_id": 18359,
							"goods_name": "中国笨尾熊纯棉纱布儿童隔汗巾颜色混批3码均发",
							"trade_type_name": "一般贸易",
							"is_activity": 0,
							"selling_point": "",
							"image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/2e38fee3cc3a44ceb3e49c7d9cba5a60_big.jpg",
							"goods_image": "https:\/\/statics.seatent.com\/statics\/99cea281725792cfefc2737e7f5ecb3d\/attachment\/upload\/image\/20200307\/2e38fee3cc3a44ceb3e49c7d9cba5a60_big.jpg",
							"goods_price": "3.69",
							"single_price": "3.69",
							"line_price": "0.00",
							"goods_sales": 276
						}]
					},

					"16": {
						"name": "富文本",
						"type": "richText",
						"params": {
							"content": '<p style="text-align: center;"><strong><span style="font-size:48px"></span></strong></p><p><img src="https://shop.test1.cqjh.tech/uploads/20210709111000f10614240.jpg"/></p><p style="text-align: center;"><strong><span style="font-size:48px">这里是文本的内容</span></strong><br/></p>'
						},
						"style": {
							"paddingTop": "10",
							"paddingLeft": "10",
							"background": "red"
						}
					},
					"17": {
						"name": "在线客服",
						"type": "service",
						"params": {
							"type": "phone",
							"image": "https:\/\/shop.test1.cqjh.tech\/assets\/store\/img\/diy\/service.png",
							"phone_num": "13996799834"
						},
						"style": {
							"right": "1",
							"bottom": "10",
							"opacity": "100",
						}
					},

					"page": {
						"type": "page",
						"name": "页面设置",
						"params": {
							"name": "页面名称",
							"title": "测试",
							"share_title": "分享标题"
						},
						"style": {
							"titleTextColor": "black",
							"titleBackgroundColor": "#ffffff"
						}
					}
				}
			}
		},
		onBackPress(e) {
			console.log("我返回", e)
			return true

		},
		onLoad() {

			uni.request({
				url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
				data: {
					text: 'uni.request'
				},
				header: {
					'custom-header': 'hello' //自定义请求头信息
				},
				success: (res) => {
					console.log(res.data);
					this.text = 'request success';
				}
			});
		},
		onShow() {
			// #ifdef APP-PLUS
			// plus.screen.lockOrientation('landscape-primary'); //锁定横屏
			// plus.navigator.setFullscreen(true); // 全屏显示
			// plus.navigator.hideSystemNavigation() //隐藏虚拟按键
			//#endif
		},
		methods: {
			//拖拽 或 尺寸变化 结束
			dragsresizestop(index, left, top, width, height) {
				// this.copyPlace = JSON.stringify(this.place)
				// this.place[index].x = left;
				// this.place[index].y = top; 
				// this.place[index].w = width;
				// this.place[index].h = height;
				console.log(this.place)
				// this.conflictCheck(index, left, top, width, height)
			},
			//冲突检测 此方法已移入组件内 
			conflictCheck(index, l, t, w, h) {
				const top = t;
				const left = l;
				const width = w;
				const height = h;
				if (this.place[index].isConflictCheck) {
					for (let i = 0; i < this.place.length; i++) {
						if (i == index) {
							continue;
						}
						const tw = this.place[i].w;
						const th = this.place[i].h;
						// 正则获取left与right 
						let [tl, tt] = [this.place[i].x, this.place[i].y];
		
						// 左上角与右下角重叠
						const tfAndBr = (top >= tt && left >= tl && tt + th > top && tl + tw > left) || (top <= tt &&
							left < tl && top + height > tt && left + width > tl);
						// 右上角与左下角重叠
						const brAndTf = (left <= tl && top >= tt && left + width > tl && top < tt + th) || (top < tt &&
							left > tl && top + height > tt && left < tl + tw);
						// 下边与上边重叠
						const bAndT = (top <= tt && left >= tl && top + height > tt && left < tl + tw) || (top >= tt &&
							left <= tl && top < tt + th && left > tl + tw);
						// 上边与下边重叠（宽度不一样）
						const tAndB = (top <= tt && left >= tl && top + height > tt && left < tl + tw) || (top >= tt &&
							left <= tl && top < tt + th && left > tl + tw);
						// 左边与右边重叠
						const lAndR = (left >= tl && top >= tt && left < tl + tw && top < tt + th) || (top > tt && left <=
							tl && left + width > tl && top < tt + th);
						// 左边与右边重叠（高度不一样）
						const rAndL = (top <= tt && left >= tl && top + height > tt && left < tl + tw) || (top >= tt &&
							left <= tl && top < tt + th && left + width > tl);
						// console.log(tfAndBr, brAndTf, bAndT, tAndB, lAndR, rAndL)
						// 如果冲突，就将回退到移动前的位置
						if (tfAndBr || brAndTf || bAndT || tAndB || lAndR || rAndL) {
							this.$set(this.place,index,JSON.parse(this.copyPlace)[index]);
							//解决数据改变 dom未发生变化
							let copy = JSON.parse(JSON.stringify(this.place))
							this.place=[];
							setTimeout(()=>{  
								this.place = copy
							},0)
						}
						
					}
				}
			},
		}
	}
</script>

<style>
	.content {}
</style>
